<!--
@File    : 01_数据绑定.html
@Time    : 2019/6/4 15:59
@Author  : wangshunqing
@Email   : wangshunqing@yihuacomputer.com
@Software: WebStorm
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01_数据绑定</title>
	<script src="lib/vue@2.6.10.js"></script>   
</head>
<style>
#app{ width:100%; }
#app .msg_title{ width: 100%;text-align: center;font-size: 1.8rem;}
#app .msg_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
#app .msg_btn{ height:50px; margin:10px;}
#app .msg_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
#app .msg_link{ display: flex; justify-content:space-between;}
#app .msg_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>
<body>
    <div id="app">
        <div class="msg_title"> {{ message }}</div>

      <div>
        <input v-model="user_name" class="msg_text" type="text" placeHolder="账户名/手机号/Email" >
    </div>
    <div>
        <input v-model="passwd" class="msg_text" type="password" placeHolder="请输入您的密码" >
    </div>
    <div class="msg_btn">
        <input type="submit" value="登录">
    </div>
    <div class="msg_link">
        <a href="#">立即注册</a>
        <a href="#">找回密码</a>
    </div>
    </div>
 
<script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        user_name:'',
        passwd:''
      },
      mounted(){
          console.log('$data = ', this.$data)
      },
      watch:{
        user_name:function(){
            console.log("用户名：" + this.user_name);
        },
        passwd:function(){
            console.log('密码：', this.passwd);
        }
      }
    })
</script>
</body>
</html>